<template>
  <div class="breadcrumb" v-if="data.length">
    <el-breadcrumb separator="|" style="display: flex;">
      <template v-if="data.length > 2">
        <div style="display: flex;margin-right: 20px;cursor: pointer;" @click="goBack">
          <el-icon style="width: 30px;">
            <Back style="width: 30px;" />
          </el-icon>
          <span style="font-size: 14px;">返回</span>
        </div>
        <el-breadcrumb-item> <a :href="data[0].path">{{ data[0].title }}</a> </el-breadcrumb-item>
        <el-breadcrumb-item> <a :href="data[1].path">{{ data[1].title }}</a> </el-breadcrumb-item>
        <el-breadcrumb-item> <span>详情</span> </el-breadcrumb-item>
      </template>
      <template v-else>
        <el-breadcrumb-item> <a :href="data[0].path">{{ data[0].title }}</a> </el-breadcrumb-item>
        <el-breadcrumb-item> <span>{{ data[1].title }}</span> </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import appStore from '@/store'
const data = reactive(appStore.publicStore.breadcrumbData)
const goBack = () => {
  history.back()
}
</script>

<style lang="scss">
.breadcrumb {
  margin-bottom: 20px;
}
</style>
